<template>
  <Edit
    ref="edit"
    class="cooperation-edit"
    :titles="titles"
    :rules="rules"
    size="large"
    :defaultData="defaultData"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-slot="{ formData }">
      <el-row>
        <el-col :span="24">
          <el-form-item
            :label="$t('cooperation.companyName')"
            prop="companyName"
          >
            <el-input v-model="formData.companyName" :placeholder="$tInput()" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('cooperation.school')" prop="schoolId">
            <el-select v-model="formData.schoolId" :placeholder="$tSelect()">
              <el-option
                v-for="item in schoolList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('cooperation.projectName')"
            prop="projectName"
          >
            <el-input v-model="formData.projectName" :placeholder="$tInput()" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('cooperation.projectCycle')"
            prop="projectCycle"
          >
            <el-date-picker
              v-model="formData.projectCycle"
              type="daterange"
              :range-separator="$t('tip.separator')"
              :start-placeholder="$t('tip.startDate')"
              :end-placeholder="$t('tip.endDate')"
              :clearable="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('cooperation.projectMoney')"
            prop="projectMoney"
          >
            <el-input-number
              v-model="formData.projectMoney"
              :placeholder="$tInput()"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('cooperation.peopleNum')" prop="peopleNum">
            <el-input-number
              v-model="formData.peopleNum"
              :placeholder="$tInput()"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('cooperation.major')" prop="major">
            <el-input v-model="formData.major" :placeholder="$tInput()" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('cooperation.output')" prop="output">
            <el-input v-model="formData.output" :placeholder="$tInput()" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('cooperation.pic')" prop="pic">
            <Upload :multiple="false" v-model="formData.pics">
              <el-button size="small" type="primary">点击上传</el-button>
            </Upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('cooperation.video')" prop="video">
            <Upload :multiple="false" v-model="formData.videos">
              <el-button size="small" type="primary">点击上传</el-button>
            </Upload>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </Edit>
</template>

<script>
import { dictMixin } from 'mixins'
import { Edit, Upload } from 'components'
import { fromRangeParam } from 'app/converter'
export default {
  name: 'CooperationEdit',
  mixins: [dictMixin],
  components: { Edit, Upload },
  dicts: ['cooperation_scope'],
  data() {
    return {
      defaultData: {
        pics: []
      },
      schoolList: []
    }
  },
  computed: {
    titles() {
      return {
        add: this.$t('cooperation.addTitle'),
        update: this.$t('cooperation.updateTitle')
      }
    },
    rules() {
      return {
        companyName: this.$rule('cooperation.companyName', {
          required: true
        }),
        projectName: this.$rule('cooperation.projectName', {
          required: true
        }),
        projectCycle: this.$rule('cooperation.projectCycle', {
          required: true
        }),
        projectMoney: this.$rule('cooperation.projectMoney', {
          required: true,
          trigger: 'blur'
        }),
        peopleNum: this.$rule('cooperation.peopleNum', {
          required: true,
          trigger: 'blur'
        }),
        major: this.$rule('cooperation.major', {
          required: true
        }),
        output: this.$rule('cooperation.output', {
          required: true
        })
      }
    }
  },
  methods: {
    show(data) {
      this.$refs.edit.show(
        fromRangeParam(
          data,
          'projectCycle',
          'projectCycleStart',
          'projectCycleEnd'
        )
      )
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.cooperation-edit {
  .upload {
    width: 240px;
  }
}
</style>
